<template>
	<div class="mine-content" style="margin-top: 0;">
		<Header></Header>
		<div class="tlg"></div>
		<!--<div class="uploaded">
				<span>待上传信息</span>
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary Login" style="float: right;background: #28c81e;">待上传信息（2）</a>
			</div>-->
		<ul class="order-list">
			<li v-for="(item,index) in content" :key=index @click='mineClick(item.status,item.orderNo)'>
				<p class="first_p">
					<span>{{item.orderNo}}</span>
				</p>
				<p class="second_p">
					<span class="time">{{item.orderSubmitTime | timeType}}</span>
				</p>
				<p class="third_p">
					<span :class="item.status | statusColor">{{item.status | status}}</span>
					<span :class="item.fgOrderStatus | statusColor">{{item.fgOrderStatus}}</span>
				</p>
				<img src="../../images/right.png" />
			</li>
		</ul>
		<div class="mine-infor">
			<router-view></router-view>
		</div>
		<Footer></Footer>
	</div>

</template>

<script>
	import Footer from '../../components/common/footer'
	import Header from '../../components/common/header'
	import {
		getStore
	} from '../../config/mUtils'
	import {
		getMineList
	} from '../../config/api'
	export default {
		data() {
			return {
				content: ''
			}
		},
		mounted() {
			getMineList(getStore('SupplierId'), getStore('username')).then(res => {
				this.content = res.content
			})
		},
		components: {
			Footer,
			Header
		},
		filters: {
			status: function(num) {
				switch (num) {
					case "1":
						return "补充图片";
					case "2":
						return "上传报价单";
					case "3":
						return "上传合同";
					case "4":
						return "上传车辆信息";
					case "5":
						return "确认过磅单";
					case "6":
						return "确认运输完毕";
					case "7":
						return "确认入库单";
					case "8":
						return "上传快递单"
				}
			},
			timeType:function(time){
				if(time){
					return time.substring(0,19)
				}
			},
			statusColor: function(num) {
				switch (num) {
					case "5":
						return "colorTwo";
					case "待提交":
						return "colorFour";
					case "6":
						return "colorThree";
					case "7":
						return "colorFour";
					default:
						return 'colorOne'
				}
			},

		},
		methods: {
			mineClick(status,orderNo) {
				switch(status){
					case '1':
					this.$router.push({
						path:'/waitsubmitOrder',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
					case '2':
					this.$router.push({
						path:'/quotation',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
					case '3':
					this.$router.push({
						path:'/signingContract',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
					case '4':
					this.$router.push({
						path:'/transportList',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
					case '5':
					this.$router.push({
						path:'/ponderationList',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
					case '6':
					this.$router.push({
						path:'/transportCompletion',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
					case '7':
					this.$router.push({
						path:'/confirmwarehouseReceipt',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
					case '8':
					this.$router.push({
						path:'/uploadExpress',
						query:{
							orderNo:orderNo,
							status:2
						}
					})
					break;
				}
			}
		},

	}
</script>

<style scoped="scoped" lang="less">
	.mine-content .order-list li .third_p{
		.colorOne {
			border-color: #fdb96e;
			color: #fdb96e
		}
		.colorTwo {
			border-color: #f65555;
			color: #f65555
		}
		.colorThree {
			border-color: #777777;
			color: #777777
		}
		.colorFour {
			border-color: #28c81e;
			color: #28c81e
		}
	}
</style>
